<template>
  <div>
    <el-tag>鸡眼</el-tag>
    <el-checkbox @change="clickToChange()">需要</el-checkbox>
    <br/>
      <el-select v-model="jiyan.zhonglei" :disabled="disable"
                 placeholder="请选择" class="length" size="small">
        <el-option v-for="(item) in option.zhonglei" :key="item" :label="item" :value="item"></el-option>
      </el-select>
      <el-input v-model="jiyan.price" :disabled="disable"
                placeholder="请输入" size="small" class = "length"></el-input>
    <br/>
    <template v-if="getRole()">
    <el-tag type="warning" class="cost">成本: {{computeCost()}}</el-tag>
    </template>
  </div>
</template>

<script>
export default {
  name: 'Jiyan',
  props: ['Q', 'x', 'y', 'm', 'confirm'],
  data () {
    return {
      disable: true,
      jiyan: {
        zhonglei: '',
        price: ''
      },
      option: {
        zhonglei: ['3mm铁', '3.5mm铁', '4mm铁', '4.5mm铁', '5mm铁', '3mm铜', '3.5mm铜', '4mm铜', '4.5mm铜', '5mm铜']
      }
    }
  },
  methods: {
    computeCost () {
      let q = parseInt(this.Q)
      let m = parseInt(this.m)
      let cost = 0
      let costStr = ''
      let j = this.jiyan.zhonglei[this.jiyan.zhonglei.length - 1]
      switch (j) {
        case '铁':
          cost = 0.025 * m * q + 0.025 * m * q
          costStr = `0.025 × ${m} × ${q} + 0.025 × ${m} × ${q} = ${cost}`
          break
        case '铜':
          cost = 0.025 * m * q + 0.04 * m * q
          costStr = `0.025 × ${m} × ${q} + 0.04 × ${m} × ${q} = ${cost}`
          break
      }
      if (this.jiyan.price !== '') {
        let b = parseFloat(this.jiyan.price)
        cost = b * m * q + 0.025 * m * q
        costStr = `${b} × ${m} × ${q} + 0.025 × ${m} × ${q} = ${cost}`
      }
      return costStr
    },
    clickToFin () {
      if (!this.disable) this.$emit('transferToFather', 'jiyan', this.jiyan)
    },
    clickToChange () {
      this.disable = !this.disable
    },
    getRole () {
      return sessionStorage.getItem('roleType') === '1'
    }
  },
  watch: {
    confirm (nV, oV) {
      if (nV !== oV) this.clickToFin()
    }
  }
}
</script>

<style scoped>
.length {
  width: 100px;
  display: inline-block;
  margin-top: 10px;
  margin-right: 10px;
}
.cost {
  margin-top: 10px;
}
</style>
